import React, { Component } from 'react';
// 引入antd
import { Layout, Menu, Modal, message } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    ExclamationCircleOutlined
} from '@ant-design/icons';
// 引入该组件对应的样式文件
import '@/assets/css/dashboard.css'
// 引入二级路由规则
import Admin from '@/router/admin'
// 引入路由组件
import { Link } from 'react-router-dom'
// 引入接口地址
import url from '@/config/url'
// 引入axios请求
import req from '@/http/request'
const { Header, Sider, Content } = Layout;
const { confirm } = Modal;
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}


// console.log(items, this);

class Dashboard extends Component {
    constructor(props) {
        super(props)
        this.state = {
            collapsed: false,
            accountInfo: '', // 用户信息对象
            items: [], // 定义左侧菜单栏数组 (根据antd组件代码示例)
            islogined: false  //定义一个初始登录状态为false
        }
        // console.log(1);
        req.get(url.preCheck).then(res => {
            if (res.data.errNo !== 0) {
                message.error('请先登录!', 1, () => {
                    props.history.push('/login')
                })
            } else {
                this.setState({
                    islogined: true
                })
            }
        })
        // 获取本地导航菜单数据
        const navList = JSON.parse(localStorage.getItem('acl'))
        if (navList) {
            navList.map((v, i) => {
                if (v.children.length !== 0) {
                    this.state.items.push(getItem(v.auth_name, v.auth_path, <UserOutlined />,
                        v.children.map((v1) => {
                            if (v1.is_nav === 1) {
                                return getItem(<Link to={v1.auth_path}>{v1.auth_name}</Link>, v1.auth_path)
                            }
                        })
                    ))
                } else {
                    this.state.items.push(getItem(<Link to={v.auth_path}>{v.auth_name}</Link>, v.auth_path, <UserOutlined />))
                }
            })
        }
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    // 在Menu组件的api中根据key值(key值渲染时为path路径)设置初始选中菜单项(key是否为当前的页面path)
    defaultSelectedKeys = [this.props.location.pathname]
    // 在Menu组件的api中根据key值(key值渲染时为path路径)设置默认打开的菜单项(二级菜单的默认项打开需要设置它的一级菜单项) 
    defaultOpenKeys = [this.props.location.pathname.substr(0, this.props.location.pathname.lastIndexOf('/'))]
    render() {
        return (
            this.state.islogined ? <Layout>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo"></div>
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={this.defaultSelectedKeys}
                        defaultOpenKeys={this.defaultOpenKeys}
                        items={this.state.items}
                    />
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                        <span>您好, {this.state.accountInfo.username}/{this.state.accountInfo.role}</span>
                        <span className='logout' onClick={this.loginOut}>注销登录</span>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        {/* 右侧主体显示的内容 */}
                        <Admin></Admin>
                    </Content>
                </Layout>
            </Layout> : <></>
        )
    }
    //获取用户信息
    componentDidMount() {
        req.get(url.GetUserInfo).then(res => {
            this.setState({
                accountInfo: res.data.accountInfo
            })
        })
    }
    // 注销登录
    loginOut = () => {
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '你要注销登录吗?',
            onOk: () => {
                // console.log('OK');
                // 确定退出登录
                localStorage.removeItem('jwt')
                localStorage.removeItem('acl')
                // 跳转到登录页
                message.success('注销成功', 1, () => {
                    this.props.history.push('/login')
                })
            },
            onCancel() {
                // console.log('Cancel');
                // 取消
            },
        });
    }
}

export default Dashboard;
